<template>
  <div class="report-data">
    <h1>数据统计页面</h1>
    <div class="stats-container">
      <div class="stats-overview">
        <el-row :gutter="20">
          <el-col :span="6">
            <div class="stat-card">
              <div class="stat-value">1,234</div>
              <div class="stat-label">总用户数</div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="stat-card">
              <div class="stat-value">567</div>
              <div class="stat-label">订单总数</div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="stat-card">
              <div class="stat-value">89</div>
              <div class="stat-label">供应商数</div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="stat-card">
              <div class="stat-value">45</div>
              <div class="stat-label">待处理任务</div>
            </div>
          </el-col>
        </el-row>
      </div>
      
      <div class="table-container">
        <h2>月度数据统计</h2>
        <el-table :data="monthlyData" style="width: 100%" border>
          <el-table-column prop="month" label="月份" width="120" />
          <el-table-column prop="users" label="新增用户" width="120" />
          <el-table-column prop="orders" label="新增订单" width="120" />
          <el-table-column prop="suppliers" label="新增供应商" width="120" />
          <el-table-column prop="revenue" label="收入(万元)" width="120" />
          <el-table-column prop="growth" label="增长率" width="120">
            <template #default="scope">
              <span :class="scope.row.growth >= 0 ? 'positive' : 'negative'">
                {{ scope.row.growth >= 0 ? '+' : '' }}{{ scope.row.growth }}%
              </span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ReportData',
  data() {
    return {
      monthlyData: [
        {
          month: '2023-08',
          users: 125,
          orders: 68,
          suppliers: 5,
          revenue: 28.5,
          growth: 12.5
        },
        {
          month: '2023-07',
          users: 110,
          orders: 52,
          suppliers: 3,
          revenue: 25.3,
          growth: 8.7
        },
        {
          month: '2023-06',
          users: 95,
          orders: 47,
          suppliers: 4,
          revenue: 23.2,
          growth: 5.2
        },
        {
          month: '2023-05',
          users: 87,
          orders: 41,
          suppliers: 2,
          revenue: 22.1,
          growth: -2.3
        }
      ]
    }
  }
}
</script>

<style scoped>
.report-data {
  padding: 20px;
  background-color: #f5f5f5;
}

.report-data h1 {
  margin-top: 0;
  color: #2c3e50;
}

.report-data h2 {
  margin-top: 0;
  color: #2c3e50;
}

.stats-container {
  margin-top: 20px;
}

.stats-overview {
  margin-bottom: 30px;
}

.stat-card {
  background-color: white;
  border-radius: 4px;
  padding: 20px;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #3498db;
  margin-bottom: 10px;
}

.stat-label {
  font-size: 14px;
  color: #7f8c8d;
}

.table-container {
  background-color: white;
  padding: 20px;
  border-radius: 4px;
}

.positive {
  color: #27ae60;
  font-weight: bold;
}

.negative {
  color: #e74c3c;
  font-weight: bold;
}
</style>